<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/windowDialog/windowDialog,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/button/button,">  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-top" xid="top1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar1" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;panel部分&quot;}"> 
        <div class="x-titlebar-left" xid="div1"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:closeWin" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i xid="i1" class="icon-chevron-left"/>  
            <span xid="span1"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2">panel部分</div>  
        <div class="x-titlebar-right " xid="div3"> 
          <div class="empty"/> 
        </div> 
      </div> 
    </div>  
    <div class="x-panel-content" xid="content1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div id="aler"/>  
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">panel demo</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="jsSource" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:showJsSource" data-config="{&quot;label&quot;:&quot;js&quot;}"> 
        <i xid="jsSou"/>  
        <span xid="span2">js</span> 
      </a>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="source" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showPanelSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="sou"/>  
        <span xid="span2">源码</span> 
      </a>  
      <p>1、面板：容器组件</p>  
      <p>2、panel包含top、content、bottom三部分</p>  
      <p>3、下面案例演示切换top，bottom部分的显示</p>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button2" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:toggleTop" data-config="{&quot;label&quot;:&quot;toggle top&quot;}"> 
        <i xid="i2"/>  
        <span xid="span2">toggle top</span> 
      </a>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button3" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:toggleBottom" data-config="{&quot;label&quot;:&quot;toggle bottom&quot;}"> 
        <i xid="i3"/>  
        <span xid="span3">toggle bottom</span> 
      </a>  
      <h3 align="center">content部分</h3> 
    </div>  
    <div class="x-panel-bottom" xid="bottom1" style="background-color:#CCCCCC;" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <h3 align="center">bottom部分</h3>  
      <span component="$model/UI2/system/components/justep/windowDialog/windowDialog" xid="windowDialog" data-bind="component:{name:'$model/UI2/system/components/justep/windowDialog/windowDialog'}" data-config="{&quot;src&quot;:&quot;$model/UI2/system/components/justep/common/demo/dialog.w&quot;}"> 
        <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog-overlay"></div>  
        <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog">  
          <div class="x-dialog-title"> 
            <button class="close"> 
              <span>×</span> 
            </button>  
            <div class="x-dialog-title-text"/> 
          </div>  
          <div class="x-dialog-body"/> 
        </div> 
      </span> 
    </div> 
  </div> 
</div>
